<template>
  <div class="user-container">
    <!-- 用户信息 -->
    <van-cell-group class="user-info circle-bg" v-if="user">
      <van-cell class="base-info" center :border="false">
        <van-image @click="$router.push('/userinfo')" class="avatar" slot="icon" round fit="cover" :src="user && user.headUrl ? user.headUrl : 'imgs/user/avatar.png'"/>
        <div @click="$router.push('/userinfo')" class="name" slot="title">{{user.nickname}}</div>
        <van-image @click="$router.push('/userCode')" class="qrcode" fit="cover" src="imgs/user/qrcode.png"/>
      </van-cell>
    </van-cell-group>
    <div class="not-login circle-bg" v-else>
      <div class="mobile-box" @click="login">
        <img class="mobile" src="imgs/user/login.png">
      </div>
      <div class="text">登录 / 注册</div>
    </div>
    <!-- 订单信息 -->
    <van-row class="mt5 circle-bg pl0 pr0">
      <van-col span="18">
        <van-grid class="order-info" :column-num="4" :border="false" v-if="userAttachInfo">
          <van-grid-item icon='imgs/user/order/1.png' text="待付款" :badge="userAttachInfo.waitPayNum == 0 ? '' : userAttachInfo.waitPayNum" @click="$router.push({path: '/orderList', query: {status: '0'}})"/>
          <van-grid-item icon='imgs/user/order/2.png' text="待发货" :badge="userAttachInfo.waitDeliverNum == 0 ? '' : userAttachInfo.waitDeliverNum" @click="$router.push({path: '/orderList', query: {status: '1'}})"/>
          <van-grid-item icon='imgs/user/order/2.png' text="待收货" :badge="userAttachInfo.waitReceiveNum == 0 ? '' : userAttachInfo.waitReceiveNum" @click="$router.push({path: '/orderList', query: {status: '2'}})"/>
          <van-grid-item icon='imgs/user/order/4.png' text="退换货" :badge="userAttachInfo.applyNum == 0 ? '' : userAttachInfo.applyNum" @click="$router.push('/applyList')"/>
        </van-grid>
        <van-grid class="order-info" :column-num="4" :border="false" v-if="!userAttachInfo">
          <van-grid-item icon='imgs/user/order/1.png' text="待付款" badge="" @click="$router.push({path: '/orderList', query: {status: '0'}})"/>
          <van-grid-item icon='imgs/user/order/2.png' text="待发货" badge="" @click="$router.push({path: '/orderList', query: {status: '1'}})"/>
          <van-grid-item icon='imgs/user/order/2.png' text="待收货" badge="" @click="$router.push({path: '/orderList', query: {status: '2'}})"/>
          <van-grid-item icon='imgs/user/order/4.png' text="退换货" badge="" @click="$router.push('/applyList')"/>
        </van-grid>
      </van-col>
      <van-col span="6">
        <van-grid class="order-info" :column-num="1" :border="false">
          <van-grid-item icon='imgs/user/order/5.png' text="全部订单" @click="$router.push({path: '/orderList', query: {status: '-1'}})"/>
        </van-grid>
      </van-col>
    </van-row>
    <!-- 账户信息 -->
    <van-row class="mt5 circle-bg pl0 pr0">
      <van-col span="18">
        <van-grid class="data-info" :column-num="3" :border="false">
          <van-grid-item class="data-info-item" @click="$router.push('/userAccount')">
            <div slot="text" class="text-wrap">
              <div class="count">{{user ? user.balance : 0 | fentoyuan}}</div>
              <div class="text">账户余额</div>
            </div>
          </van-grid-item>
          <van-grid-item class="data-info-item" @click="$router.push('/userScore')">
            <div slot="text" class="text-wrap">
              <div class="count">{{user ? user.currentScore : 0}}</div>
              <div class="text">积分</div>
            </div>
          </van-grid-item>
          <van-grid-item class="data-info-item" @click="$router.push('/coupon')">
            <div slot="text" class="text-wrap">
              <div class="count">{{userAttachInfo ? userAttachInfo.couponNum : 0}}</div>
              <div class="text">优惠券</div>
            </div>
          </van-grid-item>
        </van-grid>
      </van-col>
      <van-col span="6">
        <van-grid class="order-info" :column-num="1" :border="false">
          <van-grid-item icon='imgs/user/wallet.png' text="我的钱包"  @click="$router.push('/userAccount')"/>
        </van-grid>
      </van-col>
    </van-row>
    <!-- 快速导航 -->
    <van-grid square :border="false" class="mt5 circle-bg pl0 pr0">
      <van-grid-item @click="$router.push(menu.path)" v-for="(menu, index) in menuList" :icon='menu.icon' :text="menu.name" :key="index"/>
    </van-grid>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import userApi from '@/api/userApi'
import config from '@/config/config'
import constants from '@/config/constants'

export default {
  name: 'user',
  data () {
    return {
      menuList: config.userMenuList
    }
  },
  computed: {
    ...mapState(['user', 'userAttachInfo'])
  },
  created () {
    this.$store.commit(constants.STORE.UPDATE_USER);
  },
  methods: {
    /* 模拟登录 */
    async simulateLogin () {
      this.$toast.loading("模拟登录中...");
      const result = await userApi.login({
        accountType: '0',
        loginAccount: '13000000000',
        loginPassword: '123456'
      })
      if(result.code == constants.SUCCESS){
        setTimeout(()=>{
          this.$store.commit(constants.STORE.SET_TOKEN, {
            "id": result.data.memberInfo.id,
            "token": result.data.token
          });
          this.$toast.success("登录成功");
          this.$router.back();
        }, 1000);
      }
    },
    login () {
      this.$router.push('/login');
    }
  }
}
</script>

<style lang="scss">
.user-container {
  padding-top: 10px;
  .user-info {
    background: url("") no-repeat;
    background-size: cover;
    .base-info {
      box-sizing: border-box;
      height: 160px;
      padding-top: 40px;
      background-color: unset;
      padding-bottom: 11px;
      .van-cell__value{
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .avatar {
        box-sizing: border-box;
        width: 66px;
        height: 66px;
        border: 1px solid rgba(233,180,97,1);
        margin-right: 11px;
        padding: 5px;
      }
      .qrcode{
        width: 37px;
        height: 37px;
      }
      .name {
        font-size: 15px;
        color: #fff;
      }
      .update-btn {
        height: 16px;
        font-size: 10px;
        color: #666666;
      }
    }

    /deep/ .van-grid-item__content {
      background-color: unset;
    }
  }
  .order-info {
    height: 90px;
    /deep/ .van-icon__image{
      height: 0.8em;
      width: 0.8em;
    }
    /deep/ .van-grid-item__text{
      color: #999;
    }
  }
  .data-info {
    /deep/ .van-icon__image{
      height: 0.8em;
      width: 0.8em;
    }
    .data-info-item {
      height: 90px;
      color: #999;
      .text-wrap {
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .count {
          color: #a8700d;
          font-size: 14px;
        }
        .text {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
